<!-- 统计分析 -> 数据目录 -->

<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import Api from "@/api";
import iconReyuyan from '@/components/LayerTree/images/icon-热源.svg';
import iconGongreguanxian from '@/components/LayerTree/images/icon-供热管线.svg';
import iconGongrefanwei from '@/components/LayerTree/images/icon-供热范围.svg';
import iconHuanrezhan from '@/components/LayerTree/images/icon-换热站.svg';
import iconJianxiujing from '@/components/LayerTree/images/icon-检修井.svg';
import iconFamen from '@/components/LayerTree/images/icon-阀门.svg';
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      iconReyuyan: iconReyuyan,
      iconGongreguanxian: iconGongreguanxian,
      iconGongrefanwei: iconGongrefanwei,
      iconHuanrezhan: iconHuanrezhan,
      iconJianxiujing: iconJianxiujing,
      iconFamen: iconFamen,
      data_1: 0,
      data_2: 0,
      data_3: 0,
      data_4: 0,
      data_5: 0,
      data_6: 0,
      data_7: 0,
      data_8: 0,
      data_9: 0,
      data_10: 0,
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 30)
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      // 获取供热站的数据
      Api.getDataOfGRZ().then(res => {
        const obj = Object.create(null);
        res.features.forEach(v => {
          const pro = v.properties;
          const DWMC = pro.DWMC
          if(!obj[DWMC]) {
            obj[DWMC] = 1;
          } else {
            obj[DWMC]++
          }
        });
        // 统计热源企业
        this.data_1 = Object.keys(obj).length;
        // 统计热源点
        this.data_2 = res.features.length;
      });
      // 获取换热站的数据
      Api.getDataOfHRZ().then(res => {
        // return
        // this.data_2 = res.features.filter(v => {
        //   return v.properties.SFZG === '是'
        // }).length;
        // 统计换热站
        this.data_3 = res.features.length;
      });
      // 获取供热范围的数据
      Api.getDataOfGRFW({
        ids: [],
        fields: []
      }).then(res => {
        this.data_4 = res.features.length;
      })
      //   检修井
      Api.getDataOfJXJ({
        ids: [],
        fields: []
      }).then(res => {
        this.data_7 = res.features.length;
      })
      //   阀门
      Api.getDataOfFAMEN({
        ids: [],
        fields: []
      }).then(res => {
        this.data_8 = res.features.length;
      })

      //   供热户数 需要求和
      //   供热居民户数
      let p1 = Api.getDataOfHRZAnalize({
        fieldName: 'grjmhs'
      });
      // 服务非居民户数
      let p2 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmhs'
      });
      Promise.all([p1, p2]).then(res => {
        this.data_5 = parseInt(res.reduce((a, b) => { return a + b }, 0))
      })

      //   供热面积 需要求和

      //   居民供热面积 需要求和
      let p3 = Api.getDataOfHRZAnalize({
        fieldName: 'jmgrmj'
      });
      //   服务非居民供热面积
      let p4 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmgrmj'
      });
      Promise.all([p3, p4]).then(res => {
        this.data_6 = parseInt(res.reduce((a, b) => { return a + b }, 0))
      })
    }
  }
});
</script>
<template>
  <div class="section-one">
    <GlobalCard style="position: relative" :mainTitle="'供热数据总览'">
      <template #body>
        <!-- 代码 -->
        <div id="Gongresheshizongshu">
          <div class="inner">
            <div class="item tri data-1">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyan" />
                <span>热源企业</span>
              </div>
              <div class="numb">
              <span class="data data-2 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_1" :duration="3000" :autoplay="true" />
              </span> <span class="unit font-PINGFANG_MEDIUM"> 个</span>
              </div>
            </div>

            <div class="item tri data-2">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyan" />
                <span>热源</span>
              </div>
              <div class="numb">
              <span class="data data-3 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_2" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item tri data-3">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconHuanrezhan" />
                <span>换热站</span>
              </div>
              <div class="numb">
              <span class="data data-33 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_3" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item tri data-4">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconGongrefanwei" />
                <span>供热范围</span>
              </div>
              <div class="numb">
              <span class="data data-2 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_4" :duration="3000" :autoplay="true" />
              </span> <span class="unit font-PINGFANG_MEDIUM"> 个</span>
              </div>
            </div>

            <div class="item tri data-5">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyan" />
                <span>供热户数</span>
              </div>
              <div class="numb">
              <span class="data small-size data-3 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_5" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item tri data-6">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconReyuyan" />
                <span>供热面积</span>
              </div>
              <div class="numb">
              <span class="data small-size data-3 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_6" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item dou data-7">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconJianxiujing" />
                <span>检修井</span>
              </div>
              <div class="numb">
              <span class="data data-33 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_7" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>

            <div class="item dou data-8">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconFamen" />
                <span>阀门</span>
              </div>
              <div class="numb">
              <span class="data data-33 font-YouSheBiaoTiHei">
                <count-to :startVal="0" :endVal="data_8" :duration="3000" :autoplay="true" />
              </span>
                <span class="unit "> 个</span>
              </div>
            </div>
          </div>
          <div class="mask" />
        </div>

      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-one {
  position: fixed;
  top: 11rem;
  left: 2rem;
  //height: 18rem;
}

#Gongresheshizongshu {
  position: relative;
  //height: 16rem;
  &>.inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    &>.item {
      font-size: 1rem;
      text-align: center;

      //height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url(./images/item-bg.svg);
      background-repeat: no-repeat;
      //background-size: 100% 100%;
      //background-position: left top;
      //background-image: linear-gradient(90deg, #041e3c, rgba(4, 30, 60, 0.2));
      background-color: rgba(30, 100, 190, .3);
      //background-image: linear-gradient(to top, rgba(30, 100, 190, .3), rgba(30, 100, 190, .1));
      transition: all .3s;
      margin-bottom: .2rem;
      &.tri {
        width: 33%;
      }
      &.dou {
        width: 49.5%;
      }
      &:hover {
        background-color: rgba(30, 100, 190, .5);
      }

      &>.numb {
        margin-top: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 3rem;

        &>span.data {
          font-size: 2.5rem;
          font-weight: bolder;
          &.small-size {
            font-size: 1.5rem;
          }

          &.data-2 {
            color: #168cff;
          }

          &.data-3 {
            color: #40f148;
          }

          &.data-33 {
            color: #f4ea2a;
          }
        }

        &>span.unit {
          margin-top: 3px;
          margin-left: .5rem;
          font-size: 1.5rem;
        }
      }

      &>.name {
        margin-top: .5rem;
        font-size: 1.5rem;
        line-height: 2rem;
        font-family: "alimamashuheiti" !important;
        display: flex;
        align-items: center;
        &>.icon {
          width: 2rem;
          height: 2rem;
        }
        &>span {
          margin-left: .5rem;
        }
      }
    }
  }
  &>.mask {
    //position: absolute;
    //top: 0;
    //left: 0;
    //width: 100%;
    //height: 100%;
    //background-color: rgba(0,0,0,0.8);
  }
}

</style>